<?xml version='1.0' encoding='ISO-8859-1' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich" >


<head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      <link href="../css/default.css" rel="stylesheet" type="text/css" />
      <title>AFF Corp</title>
      
      <script type="text/javascript">
	      function printObjectsSelected(output, sgcomponent){
	          output.innerHTML=sgcomponent.getSelectedItems().pluck('state');
	      }
      </script>
      
</head>

	<body>
	
	 
	
	
	<f:view><ui:include src="nucleo/menu.xhtml" /><a4j:form id="form" prependId="false">
        <h:panelGrid columns="4">
            <h:outputText value="Pesquise um amigo do seu orkut!" />
            <h:panelGrid columns="4" border="0" cellpadding="0" cellspacing="0">
                <h:inputText style="margin:0px;" id="amigosInput" />
                <h:graphicImage value="images/icons/arrow.png" onclick="#{rich:component('suggestion')}.callSuggestion(true)" alt="" />
            </h:panelGrid>
            <h:outputText id="objects" style="font-weight:bold" />
            <h:column>
           	<h:commandButton id="pesquisar" actionListener="#{usuarioPesquisaFaces.pesquisar}" value="Listar Amigos do Orkut">
			</h:commandButton>
        </h:column>
        </h:panelGrid>
        <rich:suggestionbox height="200" style="width: 30%;" usingSuggestObjects="true" onobjectchange="printObjectsSelected(#{rich:element('objects')}, #{rich:component('suggestion')});" suggestionAction="#{usuarioPesquisaFaces.autocomplete}" var="amigo" for="amigosInput" fetchValue="#{amigo.nickName}" id="suggestion" tokens=",">
            <h:column>
                <h:graphicImage value="#{amigo.imagemPerfil.url}" />
            </h:column>
            <h:column>
                <h:outputText value="#{amigo.nickName}" />
            </h:column>
        </rich:suggestionbox>
    </a4j:form><a4j:form>
		<h:messages showDetail="true" showSummary="false" style="color: blue" />

		<a4j:region>
			<rich:dataTable value="#{usuarioPesquisaFaces.usuarioList}" width="30%" var="amigo" rows="9" rowKeyVar="row" align="center" id="table" style="margin-left: 30%">

				<f:facet name="header">
					<h:outputText value="Amigos de #{usuarioPesquisaFaces.usuarioDTO.nickName}" />
				</f:facet>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="Foto" />
					</f:facet>
						<a4j:commandButton image="#{amigo.imagemPerfil.url}" id="img" action="#{usuarioPerfilFaces.abrirPerfil}" >
							<f:setPropertyActionListener value="#{amigo}" target="#{usuarioPerfilFaces.perfilDTO}" />
						</a4j:commandButton>
						<rich:toolTip followMouse="nick" value="Abrir perfil de #{amigo.nickName}" />
				</rich:column>
				<rich:column id="nick">
					<f:facet name="header">
						<h:outputText value="Nick" />
					</f:facet>
					<a4j:commandLink action="#{usuarioPerfilFaces.abrirPerfil}">
						<h:outputText value="#{amigo.nickName}" escape="false"></h:outputText>
						<f:setPropertyActionListener value="#{amigo}" target="#{usuarioPerfilFaces.perfilDTO}" />
					</a4j:commandLink>
					<rich:toolTip followMouse="nick" value="Abrir perfil de #{amigo.nickName}" />
				</rich:column>

				<f:facet name="footer">
					<rich:datascroller renderIfSinglePage="false" maxPages="5" />
				</f:facet>
			</rich:dataTable>
		</a4j:region>
	</a4j:form></f:view></body>
</html>